
body{background: #f2f2f2}
//中部
#main{width:100%;height:100px;border-bottom: 1px solid #f15c18;
  .wrapper{width:1200px;height:96px;
    .logo{width:240px;height:68px;float: left;margin:10px 0 18px 0;
      a{display: block;
        img{width:240px;height:68px;}
      }
    };
    ul{float: right;width:640px;height:70px;margin:15px 0;
      li{width:160px;height:70px;float:left;position: relative;
        i{display:block;width:30px;height:30px;margin:0 auto;background:url("../../images/shopcart_bg.png")};
        span{border-bottom: 1px solid #616161;width:100%;display: block;margin-top: 5px};
        b{position: absolute;width:7px;height:7px;left:50%;top:50%;background: #333333;margin-left:-3px;border-radius: 50%;margin-top:-3px;};
        p{width:100%;height:24px;line-height: 24px;text-align: center;color:#999;margin-top:5px;}
      };
    }
  }
}


//购物车
#cart{background: #f2f2f2;width:100%;
  .wrapper{width: 1200px;
    .top{width:100%;height:50px;padding:15px 0;
      h2{heihgt:30px;line-height: 30px;font-size: 20px;}
      h5{height:20px;line-height: 20px;color:#999;}
    };
    .bottom{width:1190px;padding:0 5px;
      #tital{height:20px;padding:6px 0 14px 0;background: #f2f2f2;border:0;
        li{float: left;height:20px;line-height: 20px};
        li:nth-of-type(1){width:110px;};
        li:nth-of-type(2){width:420px;}
        li:nth-of-type(3){width:110px;padding-left:40px;}
        li:nth-of-type(4){width:190px;}
        li:nth-of-type(5){width:78px;text-align: center}
        li:nth-of-type(6){width:150px;text-align: right}
      };
      .head{width:1150px;padding:0 20px;height:48px;background: #fff;
        p{height:48px;line-height:48px;float: left;
          input{vertical-align: middle;margin-right:8px;}
          a{color:#666;};
          a:hover{color:red;}
        };
        i{width:18px;height:18px;display: block;background: url("../../images/shopcart_yan.png") no-repeat -1px -22px;float: left;margin-top:15px;cursor: pointer;margin-left:10px;}
        i:hover{background: url("../../images/shopcart_yan.png") no-repeat -1px -1px;};

      };
      ul{width:1150px;height:82px;padding:20px 20px 25px 20px;border-top:1px solid #E6E6E6;background: #fff;
        li{float: left;height:100%;}
        li:nth-of-type(1){width:70px;};
        li:nth-of-type(2){width:100px;
          img{width:80px;height:80px;border:1px solid #E6E6E6;}
        };
        li:nth-of-type(3){width:320px;};
        li:nth-of-type(4){width:90px;padding-left:20px;
          button{width:30px;height:30px;background: #E6E6E6;cursor: pointer;border: 0;outline: none;}
        }
        li:nth-of-type(5){width:190px;text-align: center;}
        li:nth-of-type(6){width:120px;}
        li:nth-of-type(7){width:150px;text-align: center;float: right}
      }
    }
  }
}


//结算
#buy .wrapper{width:1190px;height:56px;border-bottom: 1px solid #E6E6E6;background: #fff;margin-top:20px;line-height: 56px;margin-bottom: 235px;
  div:nth-of-type(1){width:190px;height:56px;padding-left:20px;float: left;
    a{padding-left: 20px;color:#666;};
    a:hover{color:red;}
  };
  div:nth-of-type(2){width:820px;height:56px;float: left;
    p{float: right;
      span{color:#f15c18;font-size: 20px;}
    }
  };
  div:nth-of-type(3){width:150px;height:56px;float: right;
    input{border:0;outline: none;width:100%;height:100%;background: #999;font-size: 22px;line-height: 56px;text-align: center;color:#333;}
  };
}


//侧边栏
#aside{width:280px;height:100%;position: fixed;top:0;right:-270px;
  .aside-l{width: 10px;height:100%;background:#333;float: left;position: relative;
    >ul{position: absolute;top:50%;left:-28px;margin-top:-80px;
      >li{width:30px;height:30px;background: #333;margin-bottom: 5px;border-radius: 5px;position: relative;
        >a{display: block;width:100%;height:100%;background: url("../../images/toolbar_bg.png") no-repeat -2px -54px;};
        >em{display: block;height:30px;width:80px;background: #f15c18;color:#fff;position: absolute;left:30px;top:0;text-align: center;line-height: 30px;border-radius: 5px;opacity: 0;z-index: -1}
        i{display: block;width:20px;height:20px;border-radius: 50%;position: absolute;left:10px;top:-10px;background: #f15c18;color:#fff;text-align: center;line-height: 20px}
      }
    }

    span{width:30px;height:30px;background: #333;border-radius: 5px;position: absolute;left:-28px;bottom: 0;cursor: pointer;color:#fff;line-height: 30px;text-align:center;font-size: 10px}
  };
  .aside-r{width:270px;height:100%;background: #f2f2f2;float: right;position: relative;
    h3{height:42px;line-height: 42px;
      a{display: block;width:80px;height: 100%;line-height: 42px;float: left;margin-left:7px;text-align: right;font-size: 18px;color:#666;position: relative;
        i{display: block;width:18px;height:18px;position:absolute;top:12px;left:0;background: url("../../images/toolbar_bg.png") no-repeat -51px -51px;}
      };
      span{float: right;line-height: 42px;color:#999;padding-right:15px;font-size: 14px;cursor: pointer}
    }
    >ul{
      >li{width:256px;background: #fff;padding:10px 7px;overflow: hidden;
        img{width:50px;height:50px;border:1px solid #E6E6E6;float: left;};
        a{display: block;width:180px;float: left;margin-left:10px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;color:#666;};
        a:hover{color:red;}
        span{display: block;float: left;margin-left:10px;font-size: 14px;color:#f15c18;margin-top:10px;width:60px;
          i{font-size: 12px;color:#999;padding-left:7px;}
        };

        em{float: right;color:#666;margin-top: 10px;cursor: pointer};
        em:hover{color:red;}
      }
    };



    >div{width: 100%;height:70px;position: absolute;bottom: 0;
      p{width:140px;line-height: 20px;margin-top:10px;float: left;font-size: 14px;color:#999;
        em{color:#f15c18;}
      }
      P:nth-of-type(2){
        em{font-size: 20px}
      }
      a{display: block;width:100px;height:40px;float: right;margin-bottom:15px;background: #f15c18;font-size: 14px;line-height: 40px;text-align: center;color:#fff;border-radius: 5px;}
    }
  }
}




























